<!-- 多选框 -->
<template>
  <div class="container-checkbox">
    <div>
      <h2>中间状态</h2>
      <el-checkbox
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
        >Check all</el-checkbox
      >
      <el-checkbox-group
        v-model="checkedCities"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox v-for="city in cities" :key="city" :label="city" border>{{
          city
        }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div>
      <h2>按钮样式</h2>
      <el-checkbox-group v-model="checkedCities" size="large">
        <el-checkbox-button v-for="city in cities" :key="city" :label="city">
          {{ city }}
        </el-checkbox-button>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const checkAll = ref(false);
const isIndeterminate = ref(true);
const checkedCities = ref(["Shanghai", "Beijing"]);
const cities = ["Shanghai", "Beijing", "Guangzhou", "Shenzhen"];

//全选按钮
const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? cities : [];
  isIndeterminate.value = false;
};

const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === cities.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
};
</script>

<style scoped>
.container-checkbox {
  padding: 20px;
}
</style>
